// components/popup/popup.js
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        // 是否显示弹窗（双向绑定）
        show: {
            type: Boolean,
            value: false,
        },
        // 弹窗内容显示位置，默认底部弹出
        // top	顶部弹出
        // center	居中弹出
        // bottom	底部弹出
        type: {
            type: String,
            value: "bottom"
        },
        // 蒙版点击关闭弹窗
        maskClickClose: {
            type: Boolean,
            value: true,
        },
        // 蒙版颜色
        maskBg: {
            type: String,
            value: 'rgba(0, 0, 0, 0.6)',
        },
    },

    /**
     * 组件的初始数据
     */
    data: {
        popupClass: '',
        showPopup: false,
    },
    observers: {
        show: function (val) {
            if (val) {
                this.setData({
                    showPopup: true,
                    popupClass: `popup-on-${this.data.type}`,
                })
            } else {
                this.setData({
                    popupClass: `popup-out-${this.data.type}`
                })
            }
        },
    },

    /**
     * 组件的方法列表
     */
    methods: {
        popupAnimationEnd() {
            // console.log("动画执行结束");
            if (this.data.popupClass === `popup-out-${this.data.type}`) {
                this.setData({
                    show: false,
                    showPopup: false,
                })
            }
        },
        closePopup() {
            if (!this.data.maskClickClose) return
            this.setData({
                // popupClass: `popup-out-${this.data.type}`
                show: false,
            })
            this.triggerEvent('close')
        },

        touchmove() { }
    }
})